/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
<div :style="{position: 'reletive'}">
  <div :style="{position: 'absolute', left: Data?Data.left:0, top: Data?Data.top:0}">
    <svg
      version="1.1"
      id="图层_1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      :width="Width"
      :height="Height"
      viewBox="0 0 60 60"
      style="enable-background:new 0 0 60 60;"
      xml:space="preserve">
    <g>
      <path
        id="西北左转"
        :stroke-width="PathWidth"
        :fill="status[29].color"
        :class="status[29].isshow ? '' : 'invisible'"
        d="M14.6,30.5L3.3,19.3l-1.4,1.4L13.2,32c1.5,1.5,3.9,1.5,5.4,0.1l1.6-1.1l1.6,2l2.7-6.4l-6.9,0.8l1.6,2l-1.8,1.3C16.5,31.3,15.3,31.3,14.6,30.5L14.6,30.5z">
      </path>
      <path
        id="西北右转"
        :stroke-width="PathWidth"
        :fill="status[30].color"
        :class="status[30].isshow ? '' : 'invisible'"
        d="M13.2,32c0.8,0.8,0.8,1.9,0.1,2.8l-1.3,1.8L10,35l-0.8,6.9l6.4-2.7l-2-1.6l1.1-1.6
        c1.4-1.6,1.4-4-0.1-5.4L3.3,19.3l-1.4,1.4L13.2,32L13.2,32z">
      </path>
      <polygon
        id="西北直行"
        :stroke-width="PathWidth"
        :fill="status[28].color"
        :class="status[28].isshow ? '' : 'invisible'"
        points="1.9,20.7 18.3,37.1 16.5,38.9 23.3,40.7 21.4,34 19.7,35.7 3.3,19.3"/>
      <path
        id="西北调头"
        :stroke-width="PathWidth"
        :fill="status[31].color"
        :class="status[31].isshow ? '' : 'invisible'"
        d="M15.7,21.6l-2.1-2.1l1.7-1.7l-6.7-1.8l1.8,6.7l1.8-1.8l2.1,2.1c0.7,0.7,0.6,2.1-0.4,3.1
        c-0.9,0.9-2.4,1.1-3.1,0.4l-7.4-7.4l-1.4,1.4l7.4,7.4c1.5,1.5,4.2,1.3,5.9-0.4C17,25.7,17.2,23.1,15.7,21.6z"></path>
      <path
        id="西南左转"
        :stroke-width="PathWidth"
        :fill="status[21].color"
        :class="status[21].isshow ? '' : 'invisible'"
        d="M29.9,42.8L18.7,54l1.4,1.4l11.3-11.3c1.5-1.5,1.5-3.9,0.1-5.4l-1.1-1.6l2-1.6l-6.4-2.6
        l0.8,6.9l2-1.6L30,40C30.6,40.8,30.7,42,29.9,42.8L29.9,42.8z"></path>
      <path
        id="西南右转"
        :stroke-width="PathWidth"
        :fill="status[22].color"
        :class="status[22].isshow ? '' : 'invisible'"
        d="M34.3,44.2l1.6,1.2l-1.6,2l6.9,0.8l-2.7-6.4l-1.6,2l-1.6-1.1c-1.5-1.5-3.9-1.5-5.4,0.1
        L18.7,54l1.4,1.4l11.4-11.4c0.7-0.7,2-0.7,2.7,0L34.3,44.2z"></path>
      <polygon
        id="西南直行"
        :stroke-width="PathWidth"
        :fill="status[20].color"
        :class="status[20].isshow ? '' : 'invisible'"
        points="20.1,55.4 36.5,39 38.2,40.7 40.1,34 33.3,35.8 35.1,37.6 18.7,54"/>
      <path
        id="西南调头"
        :stroke-width="PathWidth"
        :fill="status[23].color"
        :class="status[23].isshow ? '' : 'invisible'"
        d="M21.1,41.7L19,43.8L17.3,42l-1.8,6.7l6.7-1.8l-1.8-1.8l2.1-2.1c0.7-0.7,2.1-0.6,3.1,0.4
        c0.9,0.9,1.1,2.4,0.4,3.1L18.7,54l1.4,1.4l7.4-7.4c1.5-1.5,1.3-4.2-0.4-5.9C25.2,40.4,22.6,40.2,21.1,41.7z"></path>
      <path
        id="东南左转"
        :stroke-width="PathWidth"
        :fill="status[17].color"
        :class="status[17].isshow ? '' : 'invisible'"
        d="M41.4,25.5l11.2,11.2l1.4-1.4L42.8,24c-1.5-1.5-3.9-1.5-5.4-0.1L35.8,25l-1.5-1.9l-2.7,6.4
        l6.9-0.8l-1.6-2l1.8-1.3C39.5,24.7,40.7,24.7,41.4,25.5L41.4,25.5z"></path>
      <path
        id="东南右转"
        :stroke-width="PathWidth"
        :fill="status[18].color"
        :class="status[18].isshow ? '' : 'invisible'"
        d="M42.8,24c-0.8-0.8-0.8-1.9-0.1-2.8l1.3-1.8l2,1.6l0.8-6.9l-6.4,2.7l1.9,1.5l-1.1,1.6
        c-1.4,1.6-1.4,4,0.1,5.4l11.3,11.3l1.4-1.4L42.8,24L42.8,24z"></path>
      <polygon
        id="东南直行"
        :stroke-width="PathWidth"
        :fill="status[16].color"
        :class="status[16].isshow ? '' : 'invisible'"
        points="54.1,35.3 37.7,18.9 39.5,17.1 32.7,15.3 34.6,22 36.3,20.3 52.7,36.7"/>
      <path
        id="东南调头"
        :stroke-width="PathWidth"
        :fill="status[19].color"
        :class="status[19].isshow ? '' : 'invisible'"
        d="M40.3,34.4l2.1,2.1l-1.7,1.7l6.7,1.8l-1.8-6.7l-1.8,1.8l-2.1-2.1c-0.7-0.7-0.6-2.1,0.4-3.1
        c0.9-0.9,2.4-1.1,3.1-0.4l7.4,7.4l1.4-1.4l-7.4-7.4c-1.5-1.5-4.2-1.3-5.9,0.4C39,30.1,38.8,32.9,40.3,34.4z"></path>
      <path
        id="东北左转"
        :stroke-width="PathWidth"
        :fill="status[25].color"
        :class="status[25].isshow ? '' : 'invisible'"
        d="M26.1,13.2L37.3,2l-1.4-1.4L24.6,11.9c-1.5,1.5-1.5,3.9-0.1,5.4l1.1,1.6l-2,1.6l6.4,2.6
        l-0.8-6.9l-2,1.6L26,16C25.4,15.2,25.3,14,26.1,13.2L26.1,13.2z"></path>
      <path
        id="东北右转"
        :stroke-width="PathWidth"
        :fill="status[26].color"
        :class="status[26].isshow ? '' : 'invisible'"
        d="M21.8,11.8l-1.6-1.2l1.6-2l-6.9-0.8l2.7,6.4l1.6-2l1.6,1.1c1.5,1.5,3.9,1.5,5.4-0.1L37.3,2
        l-1.4-1.4L24.6,11.9C23.9,12.6,22.6,12.6,21.8,11.8L21.8,11.8z"></path>
      <polygon
        id="东北直行"
        :stroke-width="PathWidth"
        :fill="status[24].color"
        :class="status[24].isshow ? '' : 'invisible'"
        points="35.9,0.6 19.5,17 17.8,15.3 15.9,22 22.7,20.2 20.9,18.4 37.3,2"/>
      <path
        id="东北调头"
        :stroke-width="PathWidth"
        :fill="status[27].color"
        :class="status[27].isshow ? '' : 'invisible'"
        d="M34.9,14.3l2.1-2.1l1.8,1.8l1.8-6.7L33.8,9l1.8,1.8l-2.1,2.1c-0.7,0.7-2.1,0.6-3.1-0.4
        c-1-1-1.1-2.4-0.4-3.1L37.3,2l-1.4-1.4l-7.4,7.4c-1.5,1.5-1.3,4.2,0.4,5.9C30.8,15.6,33.4,15.8,34.9,14.3z"></path>
      </g>
      <g id="组">
      <path
        id="西左转_3_"
        :stroke-width="PathWidth"
        :fill="status[5].color"
        :class="status[5].isshow ? '' : 'invisible'"
        d="M20.3,39.3H4.4v2h16c2.1,0,3.8-1.7,3.9-3.8l0.3-1.9l2.5,0.3l-2.6-6.4l-4.3,5.4l2.5,0.3
      l-0.3,2.2C22.2,38.5,21.4,39.3,20.3,39.3L20.3,39.3z"></path>
      <path
        id="西右转"
        :stroke-width="PathWidth"
        :fill="status[6].color"
        :class="status[6].isshow ? '' : 'invisible'"
        d="M20.3,41.3c1.1,0,1.9,0.8,2.1,1.9l0.3,2.2l-2.5,0.3l4.3,5.4l2.6-6.4L24.6,45l-0.3-1.9
        c-0.1-2.1-1.8-3.8-3.9-3.8h-16v2H20.3L20.3,41.3z"></path>
      <polygon
        id="西直行_1_"
        :stroke-width="PathWidth"
        :fill="status[4].color"
        :class="status[4].isshow ? '' : 'invisible'"
        points="4.4,41.3 27.6,41.3 27.6,43.8 33.7,40.3 27.6,36.9 27.6,39.3 4.4,39.3"/>
      <path
        id="西调头_1_"
        :stroke-width="PathWidth"
        :fill="status[7].color"
        :class="status[7].isshow ? '' : 'invisible'"
        d="M14.8,32.2h-2.9v-2.4l-6,3.5l6,3.5v-2.5h2.9c1,0,1.9,1.1,1.9,2.5c0,1.3-0.9,2.5-1.9,2.5H4.4
        v2h10.4c2.1,0,3.9-2,3.9-4.5C18.6,34.2,16.9,32.2,14.8,32.2z"></path>
      <path
        id="南左转_1_"
        :stroke-width="PathWidth"
        :fill="status[13].color"
        :class="status[13].isshow ? '' : 'invisible'"
        d="M39.8,37.1V53h2V37c0-2.1-1.7-3.8-3.8-3.9l-1.9-0.3l0.3-2.5L30,33l5.4,4.3l0.3-2.5l2.2,0.3
        C38.9,35.2,39.8,36,39.8,37.1L39.8,37.1z"/>
      <path
        id="南右转_1_"
        :stroke-width="PathWidth"
        :fill="status[14].color"
        :class="status[14].isshow ? '' : 'invisible'"
        d="M43.9,35l2-0.3l0.3,2.5l5.4-4.3l-6.4-2.6l0.3,2.5l-1.9,0.3c-2.1,0-3.8,1.7-3.8,3.9v16h2
        V36.9c0-1,0.9-1.9,1.9-1.9H43.9z"/>
      <polygon
        id="南直行_1_"
        :stroke-width="PathWidth"
        :fill="status[12].color"
        :class="status[12].isshow ? '' : 'invisible'"
        points="41.8,53 41.8,29.8 44.2,29.8 40.8,23.7 37.3,29.8 39.8,29.8 39.8,53"/>
      <path
        id="南调头_1_"
        :stroke-width="PathWidth"
        :fill="status[15].color"
        :class="status[15].isshow ? '' : 'invisible'"
        d="M32.8,42.6v2.9h-2.5l3.5,6l3.5-6h-2.5v-2.9c0-1,1.1-1.9,2.5-1.9c1.3,0,2.5,0.9,2.5,1.9V53h2
        V42.6c0-2.1-2-3.9-4.5-3.9C34.8,38.8,32.8,40.5,32.8,42.6z"/>
      <path
        id="东左转_3_"
        :stroke-width="PathWidth"
        :fill="status[1].color"
        :class="status[1].isshow ? '' : 'invisible'"
        d="M35.7,16.7h15.9v-2h-16c-2.1,0-3.8,1.7-3.9,3.8l-0.3,1.9L29,20.1l2.6,6.4l4.3-5.4l-2.5-0.3
        l0.3-2.2C33.8,17.5,34.6,16.7,35.7,16.7L35.7,16.7z"/>
      <path
        id="东右转"
        :stroke-width="PathWidth"
        :fill="status[2].color"
        :class="status[2].isshow ? '' : 'invisible'"
        d="M35.7,14.7c-1.1,0-1.9-0.8-2-1.9l-0.3-2.2l2.5-0.3l-4.3-5.4L29,11.3l2.4-0.3l0.3,1.9
        c0.1,2.1,1.8,3.8,3.9,3.8h16v-2H35.7L35.7,14.7z"/>
      <polygon
        id="东直行_1_"
        :stroke-width="PathWidth"
        :fill="status[0].color"
        :class="status[0].isshow ? '' : 'invisible'"
        points="51.6,14.7 28.4,14.7 28.4,12.2 22.3,15.7 28.4,19.1 28.4,16.7 51.6,16.7"/>
      <path
        id="东调头_1_"
        :stroke-width="PathWidth"
        :fill="status[3].color"
        :class="status[3].isshow ? '' : 'invisible'"
        d="M41.2,23.8h2.9v2.4l6-3.5l-6-3.5v2.5h-2.9c-1,0-1.9-1.1-1.9-2.5c0-1.3,0.9-2.5,1.9-2.5h10.4
        v-2H41.2c-2.1,0-3.9,2-3.9,4.5S39.1,23.8,41.2,23.8z"/>
      <path
        id="北左转_1_"
        :stroke-width="PathWidth"
        :fill="status[9].color"
        :class="status[9].isshow ? '' : 'invisible'"
        d="M16.2,18.9V3h-2v16c0,2.1,1.7,3.8,3.8,3.9l1.9,0.3l-0.3,2.5L26,23l-5.4-4.3l-0.3,2.5
        l-2.2-0.3C17.1,20.8,16.2,20,16.2,18.9L16.2,18.9z"/>
      <path
        id="北右转_1_"
        :stroke-width="PathWidth"
        :fill="status[10].color"
        :class="status[10].isshow ? '' : 'invisible'"
        d="M12.2,20.9l-2,0.3l-0.3-2.5L4.4,23l6.4,2.6l-0.3-2.5l1.9-0.3c2.1,0,3.8-1.7,3.8-3.9V3h-2v16
        c0,1-0.9,1.9-1.9,1.9H12.2z"/>
      <polygon
        id="北直行_1_"
        :stroke-width="PathWidth"
        :fill="status[8].color"
        :class="status[8].isshow ? '' : 'invisible'"
        points="14.2,3 14.2,26.2 11.8,26.2 15.2,32.3 18.7,26.2 16.2,26.2 16.2,3"/>
      <path
        id="北调头_1_"
        :stroke-width="PathWidth"
        :fill="status[11].color"
        :class="status[11].isshow ? '' : 'invisible'"
        d="M23.2,13.4v-2.9h2.5l-3.5-6l-3.5,6h2.5v2.9c0,1-1.1,1.9-2.5,1.9s-2.5-0.9-2.5-1.9V3h-2v10.4
        c0,2.1,2,3.9,4.5,3.9C21.2,17.2,23.2,15.5,23.2,13.4z"/>
      </g>
  </svg>
  </div>
  <div :style="{position: 'absolute', left: Data?Data.left:0, top: Data?Data.top:0}">
    <svg version="1.1"
      id="图层_1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 50 50"
      style="enable-background:new 0 0 50 50;"
      :width="Width"
      :height="Height"
      xml:space="preserve">
      <g>
      <g id="东北行人" class="st0"
      :class="peoplestatus[18].isshow? '' : 'invisible'"
      >
        <rect x="33.9" y="15.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.9839 30.7754)" class="st1" width="5.6" height="1.6"/>
        <rect x="32.1" y="14" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.2517 29.0076)" class="st1" width="5.6" height="1.6"/>
        <rect x="35.6" y="17.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -1.7161 32.5431)" class="st1" width="5.6" height="1.6"/>
        <rect x="37.4" y="19.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -2.4484 34.3109)" class="st1" width="5.6" height="1.6"/>
        <rect x="39.2" y="21.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.1806 36.0787)" class="st1" width="5.6" height="1.6"/>
        <rect x="40.9" y="22.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.9128 37.8464)" class="st1" width="5.6" height="1.6"/>
        <rect x="42.7" y="24.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.6451 39.6142)" class="st1" width="5.6" height="1.6"/>
        <rect x="25.1" y="7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 2.648 22.0073)" class="st1" width="5.6" height="1.6"/>
        <rect x="23.3" y="5.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 3.3802 20.2395)" class="st1" width="5.6" height="1.6"/>
        <rect x="21.6" y="3.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 4.1124 18.4717)" class="st1" width="5.6" height="1.6"/>
        <rect x="19.8" y="1.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 4.8447 16.704)" class="st1" width="5.6" height="1.6"/>
        <rect x="26.9" y="8.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 1.9157 23.775)" class="st1" width="5.6" height="1.6"/>
        <rect x="28.6" y="10.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 1.1835 25.5428)" class="st1" width="5.6" height="1.6"/>
        <rect x="30.3" y="12.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 0.4806 27.2398)" class="st1" width="5.6" height="1.6"/>
      </g>
      <g id="西南行人" class="st0"
      :class="peoplestatus[17].isshow? '' : 'invisible'"
      >
          <rect x="13.8" y="35.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -21.0657 22.4572)" class="st1" width="5.6" height="1.6"/>
        <rect x="12" y="34.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -20.3335 20.6894)" class="st1" width="5.6" height="1.6"/>
        <rect x="15.5" y="37.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -21.798 24.225)" class="st1" width="5.6" height="1.6"/>
          <rect x="17.3" y="39.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -22.5302 25.9927)" class="st1" width="5.6" height="1.6"/>
          <rect x="19.1" y="41.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -23.2624 27.7605)" class="st1" width="5.6" height="1.6"/>
          <rect x="20.8" y="42.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -23.9947 29.5283)" class="st1" width="5.6" height="1.6"/>
          <rect x="22.6" y="44.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -24.7269 31.296)" class="st1" width="5.6" height="1.6"/>
        <rect x="5" y="27.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -17.4339 13.6891)" class="st1" width="5.6" height="1.6"/>
          <rect x="3.2" y="25.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -16.7016 11.9213)" class="st1" width="5.6" height="1.6"/>
          <rect x="1.5" y="23.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -15.9694 10.1536)" class="st1" width="5.6" height="1.6"/>
          <rect x="-0.3" y="21.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -15.2372 8.3858)" class="st1" width="5.6" height="1.6"/>
          <rect x="6.8" y="28.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -18.1661 15.4569)" class="st1" width="5.6" height="1.6"/>
          <rect x="8.5" y="30.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -18.8983 17.2246)" class="st1" width="5.6" height="1.6"/>
          <rect x="10.2" y="32.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -19.6013 18.9217)" class="st1" width="5.6" height="1.6"/>
      </g>
      <g id="东南行人" class="st0"
      :class="peoplestatus[16].isshow? '' : 'invisible'"
      >
          <rect x="30.6" y="33.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -16.7165 32.9572)" class="st1" width="1.6" height="5.6"/>
          <rect x="32.4" y="32.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.9487 33.6894)" class="st1" width="1.6" height="5.6"/>
          <rect x="28.9" y="35.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -18.4843 32.225)" class="st1" width="1.6" height="5.6"/>
          <rect x="27.1" y="37.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -20.252 31.4927)" class="st1" width="1.6" height="5.6"/>
          <rect x="25.3" y="39.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -22.0198 30.7605)" class="st1" width="1.6" height="5.6"/>
          <rect x="23.6" y="40.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -23.7876 30.0283)" class="st1" width="1.6" height="5.6"/>
          <rect x="21.8" y="42.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -25.5553 29.296)" class="st1" width="1.6" height="5.6"/>
          <rect x="39.4" y="25.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.9484 36.5891)" class="st1" width="1.6" height="5.6"/>
          <rect x="41.2" y="23.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.1806 37.3213)" class="st1" width="1.6" height="5.6"/>
          <rect x="42.9" y="21.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.4128 38.0536)" class="st1" width="1.6" height="5.6"/>
          <rect x="44.7" y="19.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -2.6451 38.7858)" class="st1" width="1.6" height="5.6"/>
          <rect x="37.6" y="26.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -9.7161 35.8569)" class="st1" width="1.6" height="5.6"/>
          <rect x="35.9" y="28.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -11.4839 35.1246)" class="st1" width="1.6" height="5.6"/>
          <rect x="34.2" y="30.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -13.181 34.4217)" class="st1" width="1.6" height="5.6"/>
      </g>
      <g id="西北行人" class="st0"
          :class="peoplestatus[19].isshow? '' : 'invisible'"
          >
      <rect x="10.5" y="13.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -8.3983 12.8754)" class="st1" width="1.6" height="5.6"/>
      <rect x="12.3" y="12" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.6306 13.6076)" class="st1" width="1.6" height="5.6"/>
      <rect x="8.8" y="15.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -10.1661 12.1431)" class="st1" width="1.6" height="5.6"/>
      <rect x="7" y="17.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -11.9339 11.4109)" class="st1" width="1.6" height="5.6"/>
      <rect x="5.2" y="19.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -13.7016 10.6787)" class="st1" width="1.6" height="5.6"/>
      <rect x="3.5" y="20.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -15.4694 9.9464)" class="st1" width="1.6" height="5.6"/>
      <rect x="1.7" y="22.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -17.2372 9.2142)" class="st1" width="1.6" height="5.6"/>
      <rect x="19.3" y="5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 0.3698 16.5073)" class="st1" width="1.6" height="5.6"/>
      <rect x="21.1" y="3.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 2.1376 17.2395)" class="st1" width="1.6" height="5.6"/>
      <rect x="22.8" y="1.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 3.9053 17.9717)" class="st1" width="1.6" height="5.6"/>
      <rect x="24.6" y="-0.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 5.6731 18.704)" class="st1" width="1.6" height="5.6"/>
      <rect x="17.5" y="6.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -1.398 15.775)" class="st1" width="1.6" height="5.6"/>
      <rect x="15.8" y="8.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.1657 15.0428)" class="st1" width="1.6" height="5.6"/>
      <rect x="14.1" y="10.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.8628 14.3398)" class="st1" width="1.6" height="5.6"/>
    </g>
    <g id="二次过街-西北" class="st0">
    <g id="西北下"
      :class="peoplestatus[27].isshow? '' : 'invisible'"
      >
      <rect x="10.5" y="13.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -8.3983 12.8754)" class="st1" width="1.6" height="5.6"/>
      <rect x="8.8" y="15.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -10.1661 12.1431)" class="st1" width="1.6" height="5.6"/>
      <rect x="7" y="17.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -11.9339 11.4109)" class="st1" width="1.6" height="5.6"/>
      <rect x="5.2" y="19.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -13.7016 10.6787)" class="st1" width="1.6" height="5.6"/>
      <rect x="3.5" y="20.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -15.4694 9.9464)" class="st1" width="1.6" height="5.6"/>
      <rect x="1.7" y="22.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -17.2372 9.2142)" class="st1" width="1.6" height="5.6"/>
    </g>
    <g id="西北上"
    :class="peoplestatus[26].isshow? '' : 'invisible'"
    >
      <rect x="19.3" y="5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 0.3698 16.5073)" class="st1" width="1.6" height="5.6"/>
      <rect x="21.1" y="3.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 2.1376 17.2395)" class="st1" width="1.6" height="5.6"/>
      <rect x="22.8" y="1.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 3.9053 17.9717)" class="st1" width="1.6" height="5.6"/>
      <rect x="24.6" y="-0.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 5.6731 18.704)" class="st1" width="1.6" height="5.6"/>
      <rect x="17.5" y="6.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -1.398 15.775)" class="st1" width="1.6" height="5.6"/>
      <rect x="15.8" y="8.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.1657 15.0428)" class="st1" width="1.6" height="5.6"/>
    </g>
    </g>
    <g id="二次过街-东南" class="st0">
      <g id="东南下"
      :class="peoplestatus[21].isshow? '' : 'invisible'"
      >
        <rect x="35.9" y="28.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -11.4839 35.1246)" class="st1" width="1.6" height="5.6"/>
        <rect x="37.6" y="26.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -9.7161 35.8569)" class="st1" width="1.6" height="5.6"/>
        <rect x="39.4" y="25.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.9484 36.5891)" class="st1" width="1.6" height="5.6"/>
        <rect x="41.2" y="23.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.1806 37.3213)" class="st1" width="1.6" height="5.6"/>
        <rect x="42.9" y="21.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.4128 38.0536)" class="st1" width="1.6" height="5.6"/>
        <rect x="44.7" y="19.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -2.6451 38.7858)" class="st1" width="1.6" height="5.6"/>
      </g>
      <g id="东南上"
      :class="peoplestatus[20].isshow? '' : 'invisible'"
      >
        <rect x="27.1" y="37.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -20.252 31.4927)" class="st1" width="1.6" height="5.6"/>
        <rect x="25.3" y="39.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -22.0198 30.7605)" class="st1" width="1.6" height="5.6"/>
        <rect x="23.6" y="40.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -23.7876 30.0283)" class="st1" width="1.6" height="5.6"/>
        <rect x="21.8" y="42.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -25.5553 29.296)" class="st1" width="1.6" height="5.6"/>
        <rect x="28.9" y="35.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -18.4843 32.225)" class="st1" width="1.6" height="5.6"/>
        <rect x="30.6" y="33.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -16.7165 32.9572)" class="st1" width="1.6" height="5.6"/>
      </g>
    </g>
    <g id="二次过街-西南" class="st0">
      <g id="西南下"
      :class="peoplestatus[23].isshow? '' : 'invisible'"
      >
        <rect x="13.8" y="35.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -21.0657 22.4572)" class="st1" width="5.6" height="1.6"/>
        <rect x="15.5" y="37.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -21.798 24.225)" class="st1" width="5.6" height="1.6"/>
        <rect x="17.3" y="39.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -22.5302 25.9927)" class="st1" width="5.6" height="1.6"/>
        <rect x="19.1" y="41.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -23.2624 27.7605)" class="st1" width="5.6" height="1.6"/>
        <rect x="20.8" y="42.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -23.9947 29.5283)" class="st1" width="5.6" height="1.6"/>
        <rect x="22.6" y="44.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -24.7269 31.296)" class="st1" width="5.6" height="1.6"/>
      </g>
      <g id="西南上"
      :class="peoplestatus[22].isshow? '' : 'invisible'"
      >
        <rect x="5" y="27.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -17.4339 13.6891)" class="st1" width="5.6" height="1.6"/>
        <rect x="3.2" y="25.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -16.7016 11.9213)" class="st1" width="5.6" height="1.6"/>
        <rect x="1.5" y="23.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -15.9694 10.1536)" class="st1" width="5.6" height="1.6"/>
        <rect x="-0.3" y="21.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -15.2372 8.3858)" class="st1" width="5.6" height="1.6"/>
        <rect x="6.8" y="28.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -18.1661 15.4569)" class="st1" width="5.6" height="1.6"/>
        <rect x="8.5" y="30.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -18.8983 17.2246)" class="st1" width="5.6" height="1.6"/>
      </g>
    </g>
    <g id="二次过街-东北" class="st0">
      <g id="东北下"
      :class="peoplestatus[25].isshow? '' : 'invisible'"
      >
        <rect x="33.9" y="15.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.9839 30.7754)" class="st1" width="5.6" height="1.6"/>
        <rect x="35.6" y="17.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -1.7161 32.5431)" class="st1" width="5.6" height="1.6"/>
        <rect x="37.4" y="19.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -2.4484 34.3109)" class="st1" width="5.6" height="1.6"/>
        <rect x="39.2" y="21.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.1806 36.0787)" class="st1" width="5.6" height="1.6"/>
        <rect x="40.9" y="22.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.9128 37.8464)" class="st1" width="5.6" height="1.6"/>
        <rect x="42.7" y="24.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.6451 39.6142)" class="st1" width="5.6" height="1.6"/>
      </g>
      <g id="东北上"
      :class="peoplestatus[24].isshow? '' : 'invisible'"
      >
        <rect x="25.1" y="7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 2.648 22.0073)" class="st1" width="5.6" height="1.6"/>
        <rect x="23.3" y="5.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 3.3802 20.2395)" class="st1" width="5.6" height="1.6"/>
        <rect x="21.6" y="3.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 4.1124 18.4717)" class="st1" width="5.6" height="1.6"/>
        <rect x="19.8" y="1.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 4.8447 16.704)" class="st1" width="5.6" height="1.6"/>
        <rect x="26.9" y="8.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 1.9157 23.775)" class="st1" width="5.6" height="1.6"/>
        <rect x="28.6" y="10.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 1.1835 25.5428)" class="st1" width="5.6" height="1.6"/>
      </g>
    </g>
    </g>
    <g>
    <g id="路段行人过街-东西"
    :class="peoplestatus[0].isshow? '' : 'invisible'"
    class="st0">
      <rect x="26.9" y="21.2" class="st1" width="1.6" height="5.6"/>
      <rect x="24.4" y="21.2" class="st1" width="1.6" height="5.6"/>
      <rect x="29.4" y="21.2" class="st1" width="1.6" height="5.6"/>
      <rect x="31.9" y="21.2" class="st1" width="1.6" height="5.6"/>
      <rect x="34.4" y="21.2" class="st1" width="1.6" height="5.6"/>
      <rect x="36.9" y="21.2" class="st1" width="1.6" height="5.6"/>
      <rect x="39.4" y="21.2" class="st1" width="1.6" height="5.6"/>
      <rect x="14.5" y="21.2" class="st1" width="1.6" height="5.6"/>
      <rect x="12" y="21.2" class="st1" width="1.6" height="5.6"/>
      <rect x="9.5" y="21.2" class="st1" width="1.6" height="5.6"/>
      <rect x="7" y="21.2" class="st1" width="1.6" height="5.6"/>
      <rect x="17" y="21.2" class="st1" width="1.6" height="5.6"/>
      <rect x="19.5" y="21.2" class="st1" width="1.6" height="5.6"/>
      <rect x="21.9" y="21.2" class="st1" width="1.6" height="5.6"/>
    </g>
    <g id="路段行人过街-南北" class="st0"
    :class="peoplestatus[1].isshow? '' : 'invisible'"
    >
      <rect x="21.2" y="26.9" class="st1" width="5.6" height="1.6"/>
      <rect x="21.2" y="24.4" class="st1" width="5.6" height="1.6"/>
      <rect x="21.2" y="29.4" class="st1" width="5.6" height="1.6"/>
      <rect x="21.2" y="31.9" class="st1" width="5.6" height="1.6"/>
      <rect x="21.2" y="34.4" class="st1" width="5.6" height="1.6"/>
      <rect x="21.2" y="36.9" class="st1" width="5.6" height="1.6"/>
      <rect x="21.2" y="39.4" class="st1" width="5.6" height="1.6"/>
      <rect x="21.2" y="14.5" class="st1" width="5.6" height="1.6"/>
      <rect x="21.2" y="12" class="st1" width="5.6" height="1.6"/>
      <rect x="21.2" y="9.5" class="st1" width="5.6" height="1.6"/>
      <rect x="21.2" y="7" class="st1" width="5.6" height="1.6"/>
      <rect x="21.2" y="17" class="st1" width="5.6" height="1.6"/>
      <rect x="21.2" y="19.5" class="st1" width="5.6" height="1.6"/>
      <rect x="21.2" y="21.9" class="st1" width="5.6" height="1.6"/>
    </g>
    <g id="斜向行人1" class="st0"
      :class="peoplestatus[2].isshow? '' : 'invisible'"
    >
      <rect x="21.2" y="23.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -9.9456 23.9999)" class="st1" width="5.6" height="1.6"/>
      <rect x="19.4" y="21.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -9.2334 22.1999)" class="st1" width="5.6" height="1.6"/>
      <rect x="22.9" y="25" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -10.6993 25.6999)" class="st1" width="5.6" height="1.6"/>
      <rect x="24.7" y="26.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -11.4115 27.4998)" class="st1" width="5.6" height="1.6"/>
      <rect x="26.5" y="28.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -12.1237 29.2997)" class="st1" width="5.6" height="1.6"/>
      <rect x="28.2" y="30.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -12.8774 30.9998)" class="st1" width="5.6" height="1.6"/>
      <rect x="30" y="32" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -13.5896 32.7997)" class="st1" width="5.6" height="1.6"/>
      <rect x="31.7" y="33.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.3344 34.4998)" class="st1" width="5.6" height="1.6"/>
      <rect x="33.5" y="35.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -15.0467 36.2997)" class="st1" width="5.6" height="1.6"/>
      <rect x="35.3" y="37.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -15.7589 38.0997)" class="st1" width="5.6" height="1.6"/>
      <rect x="12.4" y="14.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.3016 15.1999)" class="st1" width="5.6" height="1.6"/>
      <rect x="10.6" y="12.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.5893 13.3999)" class="st1" width="5.6" height="1.6"/>
      <rect x="8.9" y="10.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.8357 11.7)" class="st1" width="5.6" height="1.6"/>
      <rect x="7.1" y="9.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.1235 9.9)" class="st1" width="5.6" height="1.6"/>
      <rect x="14.1" y="16.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.0845 16.9706)" class="st1" width="5.6" height="1.6"/>
      <rect x="15.9" y="17.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.7675 18.6999)" class="st1" width="5.6" height="1.6"/>
      <rect x="17.7" y="19.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -8.4797 20.4999)" class="st1" width="5.6" height="1.6"/>
    </g>
    <g id="斜向行人2" class="st0"
    :class="peoplestatus[3].isshow? '' : 'invisible'"
    >
      <rect x="23.2" y="21.2" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -9.9412 23.9954)" class="st1" width="1.6" height="5.6"/>
      <rect x="24.9" y="19.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -8.2119 24.6784)" class="st1" width="1.6" height="5.6"/>
      <rect x="21.4" y="22.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -11.7119 23.2125)" class="st1" width="1.6" height="5.6"/>
      <rect x="19.7" y="24.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -13.4412 22.5296)" class="st1" width="1.6" height="5.6"/>
      <rect x="17.9" y="26.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -15.2412 21.8173)" class="st1" width="1.6" height="5.6"/>
      <rect x="16.1" y="28.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -17.0119 21.0344)" class="st1" width="1.6" height="5.6"/>
      <rect x="14.4" y="30" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -18.7411 20.3514)" class="st1" width="1.6" height="5.6"/>
      <rect x="12.6" y="31.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -20.5118 19.5773)" class="st1" width="1.6" height="5.6"/>
      <rect x="10.9" y="33.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -22.2411 18.8944)" class="st1" width="1.6" height="5.6"/>
      <rect x="9.1" y="35.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -24.0411 18.1821)" class="st1" width="1.6" height="5.6"/>
      <rect x="32" y="12.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -1.1413 27.6394)" class="st1" width="1.6" height="5.6"/>
      <rect x="33.7" y="10.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 0.588 28.3223)" class="st1" width="1.6" height="5.6"/>
      <rect x="35.5" y="8.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 2.3587 29.1053)" class="st1" width="1.6" height="5.6"/>
      <rect x="37.3" y="7.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 4.1587 29.8175)" class="st1" width="1.6" height="5.6"/>
      <rect x="30.2" y="14.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -2.912 26.8565)" class="st1" width="1.6" height="5.6"/>
      <rect x="28.5" y="15.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.6412 26.1735)" class="st1" width="1.6" height="5.6"/>
      <rect x="26.7" y="17.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -6.4412 25.4613)" class="st1" width="1.6" height="5.6"/>
    </g>
    <g id="北行人" class="st0"
    :class="peoplestatus[4].isshow? '' : 'invisible'"
    >
      <rect x="26.9" y="7" class="st1" width="1.6" height="5.6"/>
      <rect x="24.4" y="7" class="st1" width="1.6" height="5.6"/>
      <rect x="29.4" y="7" class="st1" width="1.6" height="5.6"/>
      <rect x="31.9" y="7" class="st1" width="1.6" height="5.6"/>
      <rect x="34.4" y="7" class="st1" width="1.6" height="5.6"/>
      <rect x="36.9" y="7" class="st1" width="1.6" height="5.6"/>
      <rect x="39.4" y="7" class="st1" width="1.6" height="5.6"/>
      <rect x="14.5" y="7" class="st1" width="1.6" height="5.6"/>
      <rect x="12" y="7" class="st1" width="1.6" height="5.6"/>
      <rect x="9.5" y="7" class="st1" width="1.6" height="5.6"/>
      <rect x="7" y="7" class="st1" width="1.6" height="5.6"/>
      <rect x="17" y="7" class="st1" width="1.6" height="5.6"/>
      <rect x="19.5" y="7" class="st1" width="1.6" height="5.6"/>
      <rect x="21.9" y="7" class="st1" width="1.6" height="5.6"/>
    </g>
    <g id="南行人" class="st0"
    :class="peoplestatus[5].isshow? '' : 'invisible'"
    >
      <rect x="26.9" y="35.4" class="st1" width="1.6" height="5.6"/>
      <rect x="24.4" y="35.4" class="st1" width="1.6" height="5.6"/>
      <rect x="29.4" y="35.4" class="st1" width="1.6" height="5.6"/>
      <rect x="31.9" y="35.4" class="st1" width="1.6" height="5.6"/>
      <rect x="34.4" y="35.4" class="st1" width="1.6" height="5.6"/>
      <rect x="36.9" y="35.4" class="st1" width="1.6" height="5.6"/>
      <rect x="39.4" y="35.4" class="st1" width="1.6" height="5.6"/>
      <rect x="14.5" y="35.4" class="st1" width="1.6" height="5.6"/>
      <rect x="12" y="35.4" class="st1" width="1.6" height="5.6"/>
      <rect x="9.5" y="35.4" class="st1" width="1.6" height="5.6"/>
      <rect x="7" y="35.4" class="st1" width="1.6" height="5.6"/>
      <rect x="17" y="35.4" class="st1" width="1.6" height="5.6"/>
      <rect x="19.5" y="35.4" class="st1" width="1.6" height="5.6"/>
      <rect x="21.9" y="35.4" class="st1" width="1.6" height="5.6"/>
    </g>
    <g id="东行人" class="st0"
    :class="peoplestatus[6].isshow? '' : 'invisible'"
    >
      <rect x="35.4" y="26.9" class="st1" width="5.6" height="1.6"/>
      <rect x="35.4" y="24.4" class="st1" width="5.6" height="1.6"/>
      <rect x="35.4" y="29.4" class="st1" width="5.6" height="1.6"/>
      <rect x="35.4" y="31.9" class="st1" width="5.6" height="1.6"/>
      <rect x="35.4" y="34.4" class="st1" width="5.6" height="1.6"/>
      <rect x="35.4" y="36.9" class="st1" width="5.6" height="1.6"/>
      <rect x="35.4" y="39.4" class="st1" width="5.6" height="1.6"/>
      <rect x="35.4" y="14.5" class="st1" width="5.6" height="1.6"/>
      <rect x="35.4" y="12" class="st1" width="5.6" height="1.6"/>
      <rect x="35.4" y="9.5" class="st1" width="5.6" height="1.6"/>
      <rect x="35.4" y="7" class="st1" width="5.6" height="1.6"/>
      <rect x="35.4" y="17" class="st1" width="5.6" height="1.6"/>
      <rect x="35.4" y="19.5" class="st1" width="5.6" height="1.6"/>
      <rect x="35.4" y="21.9" class="st1" width="5.6" height="1.6"/>
    </g>
    <g id="西行人" class="st0"
    :class="peoplestatus[7].isshow? '' : 'invisible'"
    >
      <rect x="7" y="26.9" class="st1" width="5.6" height="1.6"/>
      <rect x="7" y="24.4" class="st1" width="5.6" height="1.6"/>
      <rect x="7" y="29.4" class="st1" width="5.6" height="1.6"/>
      <rect x="7" y="31.9" class="st1" width="5.6" height="1.6"/>
      <rect x="7" y="34.4" class="st1" width="5.6" height="1.6"/>
      <rect x="7" y="36.9" class="st1" width="5.6" height="1.6"/>
      <rect x="7" y="39.4" class="st1" width="5.6" height="1.6"/>
      <rect x="7" y="14.5" class="st1" width="5.6" height="1.6"/>
      <rect x="7" y="12" class="st1" width="5.6" height="1.6"/>
      <rect x="7" y="9.5" class="st1" width="5.6" height="1.6"/>
      <rect x="7" y="7" class="st1" width="5.6" height="1.6"/>
      <rect x="7" y="17" class="st1" width="5.6" height="1.6"/>
      <rect x="7" y="19.5" class="st1" width="5.6" height="1.6"/>
      <rect x="7" y="21.9" class="st1" width="5.6" height="1.6"/>
    </g>
    <g id="二次过街-西" class="st0">
      <g id="西下"
      :class="peoplestatus[8].isshow? '' : 'invisible'"
      >
        <rect x="7" y="26.9" class="st1" width="5.6" height="1.6"/>
        <rect x="7" y="29.4" class="st1" width="5.6" height="1.6"/>
        <rect x="7" y="31.9" class="st1" width="5.6" height="1.6"/>
        <rect x="7" y="34.4" class="st1" width="5.6" height="1.6"/>
        <rect x="7" y="36.9" class="st1" width="5.6" height="1.6"/>
        <rect x="7" y="39.4" class="st1" width="5.6" height="1.6"/>
      </g>
      <g id="西上"
      :class="peoplestatus[9].isshow? '' : 'invisible'"
      >
        <rect x="7" y="14.5" class="st1" width="5.6" height="1.6"/>
        <rect x="7" y="12" class="st1" width="5.6" height="1.6"/>
        <rect x="7" y="9.5" class="st1" width="5.6" height="1.6"/>
        <rect x="7" y="7" class="st1" width="5.6" height="1.6"/>
        <rect x="7" y="17" class="st1" width="5.6" height="1.6"/>
        <rect x="7" y="19.5" class="st1" width="5.6" height="1.6"/>
      </g>
    </g>
    <g id="二次过街-东" class="st0">
      <g id="东上"
      :class="peoplestatus[10].isshow? '' : 'invisible'"
      >
        <rect x="35.4" y="19.5" class="st1" width="5.6" height="1.6"/>
        <rect x="35.4" y="17" class="st1" width="5.6" height="1.6"/>
        <rect x="35.4" y="14.5" class="st1" width="5.6" height="1.6"/>
        <rect x="35.4" y="12" class="st1" width="5.6" height="1.6"/>
        <rect x="35.4" y="9.5" class="st1" width="5.6" height="1.6"/>
        <rect x="35.4" y="7" class="st1" width="5.6" height="1.6"/>
      </g>
      <g id="东下"
      :class="peoplestatus[11].isshow? '' : 'invisible'"
      >
        <rect x="35.4" y="31.9" class="st1" width="5.6" height="1.6"/>
        <rect x="35.4" y="34.4" class="st1" width="5.6" height="1.6"/>
        <rect x="35.4" y="36.9" class="st1" width="5.6" height="1.6"/>
        <rect x="35.4" y="39.4" class="st1" width="5.6" height="1.6"/>
        <rect x="35.4" y="29.4" class="st1" width="5.6" height="1.6"/>
        <rect x="35.4" y="26.9" class="st1" width="5.6" height="1.6"/>
      </g>
    </g>
    <g id="二次过街-南" class="st0">
      <g id="南右"
      :class="peoplestatus[12].isshow? '' : 'invisible'"
      >
        <rect x="26.9" y="35.4" class="st1" width="1.6" height="5.6"/>
        <rect x="29.4" y="35.4" class="st1" width="1.6" height="5.6"/>
        <rect x="31.9" y="35.4" class="st1" width="1.6" height="5.6"/>
        <rect x="34.4" y="35.4" class="st1" width="1.6" height="5.6"/>
        <rect x="36.9" y="35.4" class="st1" width="1.6" height="5.6"/>
        <rect x="39.4" y="35.4" class="st1" width="1.6" height="5.6"/>
      </g>
      <g id="南左"
      :class="peoplestatus[13].isshow? '' : 'invisible'"
      >
        <rect x="14.5" y="35.4" class="st1" width="1.6" height="5.6"/>
        <rect x="12" y="35.4" class="st1" width="1.6" height="5.6"/>
        <rect x="9.5" y="35.4" class="st1" width="1.6" height="5.6"/>
        <rect x="7" y="35.4" class="st1" width="1.6" height="5.6"/>
        <rect x="17" y="35.4" class="st1" width="1.6" height="5.6"/>
        <rect x="19.5" y="35.4" class="st1" width="1.6" height="5.6"/>
      </g>
    </g>
    <g id="二次过街-北_1_" class="st0">
      <g id="北右_1_"
      :class="peoplestatus[14].isshow? '' : 'invisible'"
      >
        <rect x="26.9" y="7" class="st1" width="1.6" height="5.6"/>
        <rect x="29.4" y="7" class="st1" width="1.6" height="5.6"/>
        <rect x="31.9" y="7" class="st1" width="1.6" height="5.6"/>
        <rect x="34.4" y="7" class="st1" width="1.6" height="5.6"/>
        <rect x="36.9" y="7" class="st1" width="1.6" height="5.6"/>
        <rect x="39.4" y="7" class="st1" width="1.6" height="5.6"/>
      </g>
      <g id="北左_1_"
      :class="peoplestatus[15].isshow? '' : 'invisible'"
      >
        <rect x="14.5" y="7" class="st1" width="1.6" height="5.6"/>
        <rect x="12" y="7" class="st1" width="1.6" height="5.6"/>
        <rect x="9.5" y="7" class="st1" width="1.6" height="5.6"/>
        <rect x="7" y="7" class="st1" width="1.6" height="5.6"/>
        <rect x="17" y="7" class="st1" width="1.6" height="5.6"/>
        <rect x="19.5" y="7" class="st1" width="1.6" height="5.6"/>
      </g>
    </g>
</g>
</svg>
  </div>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'xdr-dir-selector',
  props: {
    showlist: {
      type: Array,
      default: function () {
        return [
          {
            id: 1,
            color: 'red'
          },
          {
            id: 2,
            color: 'yellow'
          }
        ]
      }
    },
    Width: {
      type: String,
      default: '200px'
    },
    Height: {
      type: String,
      default: '200px'
    },
    PathWidth: {
      type: Number,
      default: 18
    },
    ISActiveMask: {
      type: Boolean,
      default: false
    },
    MaskColor: {
      type: String,
      default: '#0096ba'
    },
    Data: {
      type: Object
    }
  },
  computed: {
    ...mapState({
      roadDirection: state => state.globalParam.roadDirection
    })
  },
  data () {
    return {
      maskmark: false,
      peoplestatus: [
        {
          id: 1,
          name: '东西路段人行横道',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 2,
          name: '南北路段人行横道',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 3,
          name: 'X人行横道-\\',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 4,
          name: 'X人行横道-/',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 5,
          name: '北人行横道',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 6,
          name: '南人行横道',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 7,
          name: '东人行横道',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 8,
          name: '西人行横道',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 9,
          name: '西人行横道-下',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 10,
          name: '西人行横道-上',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 11,
          name: '东人行横道-上',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 12,
          name: '东人行横道-下',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 13,
          name: '南人行横道-右',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 14,
          name: '南人行横道-左',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 15,
          name: '北人行横道-右',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 16,
          name: '北人行横道-左',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 17,
          name: '东南人行横道',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 18,
          name: '西南人行横道',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 19,
          name: '东北人行横道',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 20,
          name: '西北人行横道',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 21,
          name: '东南人行横道-上',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 22,
          name: '东南人行横道-下',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 23,
          name: '西南人行横道-上',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 24,
          name: '西南人行横道-下',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 25,
          name: '东北人行横道-上',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 26,
          name: '东北人行横道-下',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 27,
          name: '西北人行横道-上',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 28,
          name: '西北人行横道-下',
          isshow: false,
          color: '#0096ba'
        }
      ],
      status: [
        {
          id: 1,
          name: 'East-Straight',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 2,
          name: 'East-Left',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 3,
          name: 'East-Right',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 4,
          name: 'East-Back ',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 5,
          name: 'West-Straight',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 6,
          name: 'West-Left',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 7,
          name: 'West-Right',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 8,
          name: 'West-Back',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 9,
          name: 'North-Straight',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 10,
          name: 'North-Left',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 11,
          name: 'North-Right',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 12,
          name: 'North-Back',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 13,
          name: 'South-Straight',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 14,
          name: 'South-Left',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 15,
          name: 'South-Right',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 16,
          name: 'South-Back',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 17,
          name: 'Straight-Southeast',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 18,
          name: 'Southeast-Left',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 19,
          name: 'Southeast-Right',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 20,
          name: 'Turn-Southeast',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 21,
          name: 'Straight-Southwest',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 22,
          name: 'Southwest-Left',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 23,
          name: 'Southwest-Right',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 24,
          name: 'Turn-Southwest',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 25,
          name: 'Straight-Northeast',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 26,
          name: 'Northeast-Left',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 27,
          name: 'Northeast-Right-Turn',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 28,
          name: 'Turn-Northeast',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 29,
          name: 'Straight-Northwest',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 30,
          name: 'Northwest-Left-Turn',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 31,
          name: 'Northwest-Right-Turn',
          isshow: false,
          color: '#0096ba'
        },
        {
          id: 32,
          name: 'Turn-Northwest',
          isshow: false,
          color: '#0096ba'
        }
      ]
    }
  },
  methods: {
    randShow () {
      let num1 = parseInt(Math.random() * (15 - 0 + 1) + 0)
      let num2 = parseInt(Math.random() * (15 - 0 + 1) + 0)
      for (let i = 0; i < 16; i++) {
        if (this.status[i].isshow) {
          this.status[i].isshow = false
        }
        if (i === num1 || i === num2) {
          this.status[i].isshow = true
        }
      }
    },
    // 车道
    refreshShow (showList) {
      if (showList.length > 16) {
        console.log('list can not be bigger than 16!')
      }
      this.maskmark = false
      if (showList.length <= 0) {
        if (this.ISActiveMask) {
          this.maskmark = true
        }
      }

      for (let i = 0; i < 32; i++) {
        if (this.status[i].isshow) {
          this.status[i].isshow = false
        }
      }
      for (let i = 0; i < 32; i++) {
        if (i < showList.length) {
          let id = showList[i].id
          if (!id) return
          if (id > 32 || id <= 0) {
            console.log('Id is invalied!')
            continue
          }
          this.status[id - 1].isshow = true
          this.status[id - 1].color = showList[i].color
        }
      }
    },
    // 人行横道
    refreshShows (showlist) {
      if (showlist.length === 0) return
      for (let i = 0; i < 28; i++) {
        if (this.peoplestatus[i].isshow) {
          this.peoplestatus[i].isshow = false
        }
      }
      if (!showlist[0].peddirection) return
      if (showlist[0].peddirection.length === 0) return
      for (let i = 0; i < showlist[0].peddirection.length; i++) {
        for (let j = 0; j < this.peoplestatus.length; j++) {
          if (showlist[0].peddirection[i].name === this.peoplestatus[j].name) {
            this.peoplestatus[j].isshow = true
          }
        }
      }
    }
  },
  created () {
    this.refreshShow(this.showlist)
    this.refreshShows(this.showlist)
  },
  watch: {
    showlist: {
      handler: function (newList) {
        this.refreshShow(newList)
        this.refreshShows(newList)
      },
      deep: true // 深度监听
    }
  }
}
</script>

<style scoped>
.invisible {
  visibility: hidden;
}
.st0{opacity:0.5;}
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#303133;}
</style>
